<template>
    <div class="time-picker">
        <ul class="time-list">
            <li v-for="h in hourAry" @click.stop="hourChange(h)">
                <p v-bind:class="h===params.hour?'active':''">{{h}}</p>
            </li>
        </ul>
        <ul class="time-list">
            <li v-for="m in minAry" @click.stop="minChange(m)">
                <p v-bind:class="m===params.minutes?'active':''">{{m}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default{
        props:{
            params:{
                type:Object,
                default:function(){
                    return{
                        hour:'',
                        minutes:''
                    }
                }
            },
            hCb:{},
            mCb:{}
        },
        data(){
            return{
                hourAry:[],
                minAry:[],
            }
        },
        methods:{
            init(){
                //创建时间数组
                //24小时
                let h = 0, hourAry = [];
                while (h < 24) {
                if (h < 10) {
                    hourAry.push(`0${h}`);
                } else {
                    hourAry.push(`${h}`);
                }
                h++;
                }
                this.hourAry = hourAry;

                //60分钟
                let m = 0, minAry = [];
                while (m < 60) {
                if (m < 10) {
                    minAry.push(`0${m}`);
                } else {
                    minAry.push(`${m}`);
                }
                m++;
                }
                this.minAry = minAry;
            },
            hourChange(h){
                this.hCb(h)
            },
            minChange(m){
                this.mCb(m)
            }
        },
        created(){
            this.init()
        }
    }
</script>

<style lang="less" scoped>
    .time-picker{
        position: absolute;
        top: 44px;
        left: 0;
        width: 100%;
        z-index: 100;
        background-color: #fff;
        border: 1px #d2d2d2 solid;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        .time-list {
            width: 49%;
            height: 215px;
            overflow: scroll;
            animation: timePickerBox 1s ease 0s 1 normal;
            margin: 0;
            padding: 0;
            li {
                height: 30px;
                text-align: center;
                line-height: 30px;
                .active {
                    background-color:#FFEFDB;
                    color: #666;
                }
            }
            &:first-child {
                float: left;
                border-right: 1px #d2d2d2 solid;
            }
            &:last-child {
                float: right;
            }
        }
        @keyframes timePickerBox {
        0% {
            height: 0;
        }
        100% {
            height: 215px; 
        }
    }
  }
</style>